<template>
  <div class="view-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>课程体系查看</span>
      </div>
      <!-- 查询条件 -->
      <el-form :inline="true" :model="searchForm" @submit.prevent="fetchData">
        <el-form-item label="专业ID">
          <el-select v-model="searchForm.majorId" placeholder="请选择">
            <el-option
              v-for="item in majorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年级">
          <el-select v-model="searchForm.grade" placeholder="请选择">
            <el-option
              v-for="item in gradeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form>
      <!-- 数据展示 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      <div v-else class="table-section">
        <el-table :data="curriculumList" border style="width: 100%">
          <el-table-column prop="courseName" label="课程名称" align="center" />
          <el-table-column prop="credit" label="学分" align="center" />
          <el-table-column prop="semester" label="学期" align="center" />
          <el-table-column prop="courseAttribute" label="课程属性" align="center" />
          <el-table-column prop="courseCategory" label="课程类别" align="center" />
          <el-table-column prop="coursePlatform" label="课程平台" align="center" />
          <el-table-column prop="selectiveRequirement" label="选修要求" align="center" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { viewCurriculum } from '@/api/curriculum'

export default {
  name: 'CurriculumView',
  data() {
    return {
      searchForm: {
        majorId: '',
        grade: null
      },
      curriculumList: [],
      gradeOptions: [
        { label: '2021-2022-1', value: 1 },
        { label: '2022-2022-2', value: 2 },
        { label: '2022-2023-1', value: 3 },
        { label: '2023-2023-2', value: 4 }
      ],
      loading: false
    }
  },
  methods: {
    // 获取课程体系
    async fetchData() {
      if (!this.searchForm.majorId || !this.searchForm.grade) {
        this.$message.warning('请先选择专业和年级')
        return
      }

      this.loading = true
      try {
        const response = await viewCurriculum(
          this.searchForm.majorId,
          this.searchForm.grade
        )
        if (response.success) {
          this.curriculumList = response.data
        } else {
          this.$message.error(response.message)
        }
      } catch (error) {
        this.$message.error('数据加载失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.view-container {
  padding: 20px;
}

.table-section {
  margin-top: 20px;
}
</style>
